define([
  'jquery',
  'jqueryui',
  'underscore',
  'backbone',
  'slickback',
  'slickgrid',
  'slickcore',
  'jquerydrag',
  'slickpager',
  'collections/grids/DoctorCollection',
  'text!templates/grids/doctorTemplate.html',
], function($,ui, _, Backbone,  Slickback, Slickgrid, Slickcore, Drag,Slickpager, DoctorCollection, doctorTemplate){

  var DoctorGridView = Backbone.View.extend({
    initialize: function(){
    },
    el: $(".mainpanel"),
//    events: {'click .takeappointment' : 'takeappointment'} ,
    render: function(month){
    	var columnHeaders = this.setColumns;
    	var finances = new DoctorCollection({id: month });
    	var gridOptions = { 
    	  formatterFactory: Slickback.BackboneModelFormatterFactory
    	};  
	      var compiledTemplate = _.template( doctorTemplate, null );
  	      this.$el.html(compiledTemplate);
    	var grid = new Slick.Grid('#grid',finances,columnHeaders,gridOptions);
    },
    setColumns: function(){
    	 return productColumns = [
    	                       {
    	                         id:       'product_id',
    	                         name:     'Product #',
    	                         field:    'id',
    	                         sortable: true,
    	                         width:    120
    	                       },
    	                       {
    	                         id:       'product_id',
    	                         name:     'Product #',
    	                         field:    'id',
    	                         sortable: true,
    	                         width:    120
    	                       },
    	                       {
    	                         id:       'product_id',
    	                         name:     'Product #',
    	                         field:    'id',
    	                         sortable: true,
    	                         width:    120
    	                       }
    	                     ];
    }
   });

  return DoctorGridView;
});
